<!--
 * @Author: 王朋坤
 * @Date: 2021-08-24 10:30:26
 * @LastEditTime: 2021-09-09 16:47:14
 * @LastEditors: Please set LastEditors
 * @Description: cesium加载显示页面
 * @FilePath: /index/src/views/MapCesium.vue
-->
<template>
  <div id="map-cesium">
    <el-header id="header-title">cesium五种数据类型地加载</el-header>
    <el-container id="main-container">
      <el-aside width="400px">
        <!-- 复选框01 -->
        <el-checkbox
          :indeterminate="elementUI.isIndeterminate"
          v-model="elementUI.checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <!-- 复选框02 树状 -->
        <el-tree
          :data="elementUI.data"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="elementUI.defaultProps"
          :default-checked-keys="['imageBaseLayer']"
          @check-change="handleCheckChange001"
          @node-click="handleNodeClick001"
        >
        </el-tree>
      </el-aside>
      <!-- 地图显示 -->
      <el-main id="map-container001">
        <!-- 右上工具栏 -->
        <div id="map-tool-right-top-list" style="display: none">
          <i class="el-icon-refresh-right"></i>
          <i class="el-icon-zoom-in"></i>
          <i class="el-icon-zoom-out"></i>
          <!-- <i class="el-icon-location-information" @click="jumpsimple"></i> -->
          <!-- <i class="el-icon-zoom-in" @click="dataImageChangeProperty"></i> -->
        </div>
        <!-- 右下坐标显示栏 -->
        <div id="map-tool-right-bottom-list">
          <span>116.1 22.4</span>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "@/assets/css/cesium/index.scss";
import initCesium from "@/ys/cesium/initCesium.js";

// 五种数据加载
import DataImageLayerInit from "@/ys/cesium/DataTypeLoad/DataImageLayer.js";
import Data3DTitleLayerInit from "@/ys/cesium/DataTypeLoad/Data3DTitle.js";
import DataGeoJSONLayerInit from "@/ys/cesium/DataTypeLoad/DataGeoJSON.js";
import DataTerrainLayerInit from "@/ys/cesium/DataTypeLoad/DataTerrain.js";
import DataGlTFModelLayerInit from "@/ys/cesium/DataTypeLoad/DataGlTFModel.js";

export default {
  name: "App",
  beforeCreate() {},
  data() {
    return {
      elementUI: {
        checkAll: true,
        isIndeterminate: false,
        //以下使用的静态服务器提供的localhost:80/output的数据服务
        data: [
          {
            id: "ImageLayer",
            label: "ImageLayer",
            children: [
              {
                id: "imageBaseLayer",     // 唯一的id
                label: "底图",            // 控件显示名称
                type: "ImageLayer",       // 数据类型
                type02: "imageBaseLayer", // 特殊数据类型
                sourceUrl: 4,             // 资源地址
                index: 1,                 // 
              },
              {
                id: "xingShanCountry1",
                label: "区域遥感",
                type: "ImageLayer",
                sourceUrl: "/output/img/{z}/{x}/{y}.png",
                index: 2,
              },
              {
                id: "xingShanCountry2",
                label: "兴山县遥感",
                type: "ImageLayer",
                sourceUrl: "/output/输出数据/兴山县遥感/{z}/{x}/{y}.png",
                index: 3,
              },
              {
                id: "xingShanCountry3",
                label: "秭归县遥感",
                type: "ImageLayer",
                sourceUrl: "/output/输出数据/秭归县遥感/{z}/{x}/{y}.png",
                index: 4,
              },
            ],
          },
          {
            id: "three3dTitle",
            label: "3DTitle",
            children: [
              {
                id: "three3dTitle001",
                label: "倾斜摄影数据",
                type: "3DTitle",
                sourceUrl:
                  "/output/输出数据/倾斜摄影切片/production__/tileset.json",
              },
            ],
          },
          {
            id: "geojson",
            label: "GeoJSON",
            children: [
              {
                id: "geojson01",
                label: "气象站点",
                type: "GeoJSON",
                sourceUrl: "/output/输出数据/矢量边界/气象站点.json",
              },
              {
                id: "geojson02",
                label: "河流",
                type: "GeoJSON",
                sourceUrl: "/output/输出数据/矢量边界/河流.json",
              },
              {
                id: "geojson03",
                label: "兴山界线",
                type: "GeoJSON",
                sourceUrl: "/output/输出数据/矢量边界/兴山界线.json",
              },
            ],
          },
          {
            id: "terrain",
            label: "Terrain",
            children: [
              {
                id: "terrain01",
                label: "兴山县高程",
                type: "Terrain",
                sourceUrl: "/output/输出数据/兴山县高程",
                position: { x: 110.763181, y: 31.341172, z: 120.0 },
              },
              {
                id: "terrain02",
                label: "秭归县高程",
                type: "Terrain",
                sourceUrl: "/output/输出数据/秭归县高程",
                position: { x: 110.063181, y: 31.041172, z: 400.0 },
              },
            ],
          },
          {
            id: "GlTFModel",
            label: "GlTFModel",
            children: [
              {
                id: "GlTFModel01",
                label: "飞机模型",
                type: "GlTFModel",
                sourceUrl: "/output/localmodel/Cesium_Air.glb",
                positionSelf: { x: 110.763181, y: 31.341172, z: 120.0 },
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
      },
      cesiumMap: {
        // 地图入口
        viewer: null,
        // 控件配置
        defaultCesiumConifg: {
          geocoder: false,
          homeButton: false,
          sceneModePicker: false,
          baseLayerPicker: false,
          navigationHelpButton: false,
          animation: false,
          timeline: false,
          fullscreenButton: false,
        },
        // 自定义的地图相关的函数入口，如加载影像相关函数等
        mapLibInit: {
          dataTypeLoadInit: null,
          dataImageLayerInit: null,
          data3DTitleLayerInit: null,
          dataGeoJSONLayerInit: null,
          dataTerrainLayerInit: null,
          dataGlTFModelLayerInit: null,
        },
      },
    };
  },
  mounted() {
    let _this = this;
    // 遥感影像初始化
    this.cesiumMap.viewer = initCesium(
      "map-container001",
      _this.cesiumMap.defaultCesiumConifg
    );
    const viewer = this.cesiumMap.viewer;
    console.log(viewer);
  },
  methods: {
    /**
     * @description: 实体全部初始化加载
     * @param {*} viewer
     * @return {*}
     */
    initEntities(viewer) {
      console.log(viewer);
    },
    // 监听单个全选复选框变动
    handleCheckAllChange(val) {
      let viewer = this.cesiumMap.viewer;
      let dataImageLayerLoad = new DataImageLayerInit(viewer);
      dataImageLayerLoad.dataImageryLayerCollectionControl(val);
      dataImageLayerLoad.dataImageBaseLayerControl(val);
    },
    // 监听树状复选框变动
    handleCheckChange001(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      // 如果所选改变是叶子节点，如某个类型是imageBaseLayer类型的
      switch (data?.type) {
        case "ImageLayer":
          this.dataImageLayerMethods(data, checked);
          break;
        case "3DTitle":
          this.data3DTitleMethods(data, checked);
          break;
        case "GeoJSON":
          this.dataGeoJSONMethods(data, checked);
          break;
        case "Terrain":
          this.dataTerrainMethods(data, checked);
          break;
        case "GlTFModel":
          this.dataGlTFModelMethods(data, checked);
          break;
        default:
          break;
      }
    },
    // 监听树状复选框点击
    handleNodeClick001() {
      // data, checked, indeterminate
      // console.log(data, checked, indeterminate);
      // console.log(this.$refs.tree.getCheckedNodes());
      // console.log(this.$refs.tree.getCheckedKeys());
    },
    dataImageLayerMethods(itemData, displayStatus) {
      let viewer = this.cesiumMap.viewer;
      // 影像图层控制显示（未初始化则自动初始化）
      if (!this.cesiumMap.mapLibInit.dataImageLayerInit) {
        let dataImageLayerInit = new DataImageLayerInit(viewer);
        this.cesiumMap.mapLibInit.dataImageLayerInit = dataImageLayerInit;
        // 参数：itemData.type02, itemData.sourceUrl选填
        dataImageLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.type02,
          itemData.sourceUrl
        );
      } 
      else {
        let dataImageLayerInit = this.cesiumMap.mapLibInit.dataImageLayerInit;
        dataImageLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.type02,
          itemData.sourceUrl
        );
      }
    },
    data3DTitleMethods(itemData, displayStatus) {
      let viewer = this.cesiumMap.viewer;
      // 3D图层控制显示（未初始化则自动初始化）
      if (!this.cesiumMap.mapLibInit.data3DTitleLayerInit) {
        let data3DTitleLayerInit = new Data3DTitleLayerInit(viewer);
        this.cesiumMap.mapLibInit.data3DTitleLayerInit = data3DTitleLayerInit;
        // 参数：itemData.type02, itemData.sourceUrl选填
        data3DTitleLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl
        );
      } 
      else {
        let data3DTitleLayerInit = this.cesiumMap.mapLibInit.data3DTitleLayerInit;
        data3DTitleLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl
        );
      }
    },
    dataGeoJSONMethods(itemData, displayStatus) {
      let viewer = this.cesiumMap.viewer;
      // 3D图层控制显示（未初始化则自动初始化）
      if (!this.cesiumMap.mapLibInit.dataGeoJSONLayerInit) {
        let dataGeoJSONLayerInit = new DataGeoJSONLayerInit(viewer);
        this.cesiumMap.mapLibInit.dataGeoJSONLayerInit = dataGeoJSONLayerInit;
        // 参数：itemData.type02, itemData.sourceUrl选填
        dataGeoJSONLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl
        );
      } 
      else {
        let dataGeoJSONLayerInit = this.cesiumMap.mapLibInit.dataGeoJSONLayerInit;
        dataGeoJSONLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl
        );
      }
    },
    dataTerrainMethods(itemData, displayStatus) {
      let viewer = this.cesiumMap.viewer;
      // 3D图层控制显示（未初始化则自动初始化）
      if (!this.cesiumMap.mapLibInit.dataTerrainLayerInit) {
        let dataTerrainLayerInit = new DataTerrainLayerInit(viewer);
        this.cesiumMap.mapLibInit.dataTerrainLayerInit = dataTerrainLayerInit;
        // 参数：itemData.type02, itemData.sourceUrl选填
        dataTerrainLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl,
          itemData.position
        );
      } 
      else {
        let dataTerrainLayerInit =
          this.cesiumMap.mapLibInit.dataTerrainLayerInit;
        dataTerrainLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl,
          itemData.position
        );
      }
    },
    dataGlTFModelMethods(itemData, displayStatus) {
      let viewer = this.cesiumMap.viewer;
      // 3D图层控制显示（未初始化则自动初始化）
      if (!this.cesiumMap.mapLibInit.dataGlTFModelLayerInit) {
        let dataGlTFModelLayerInit = new DataGlTFModelLayerInit(viewer);
        this.cesiumMap.mapLibInit.dataGlTFModelLayerInit = dataGlTFModelLayerInit;
        // 参数：itemData.type02, itemData.sourceUrl选填
        dataGlTFModelLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl,
          itemData.positionSelf
        );
      } 
      else {
        let dataGlTFModelLayerInit = this.cesiumMap.mapLibInit.dataGlTFModelLayerInit;
        dataGlTFModelLayerInit.layerControlEntrance(
          displayStatus,
          itemData.id,
          itemData.sourceUrl,
          itemData.positionSelf
        );
      }
    },
    // test: 视图放大的方法
    zoomInClick() {
      const viewer = this.cesiumMap.viewer;
      const direction = { x: null, y: null, z: null };
      viewer.scene.camera.position.z -= 100000;
      console.log(viewer.scene.camera.position.z);
      direction.x = Cesium.Math.toDegrees(viewer.scene.camera.direction.x);
      direction.y = Cesium.Math.toDegrees(viewer.scene.camera.direction.y);
      direction.z = Cesium.Math.toDegrees(viewer.scene.camera.direction.z);

      direction.x = 0.8850143897009612;
      direction.y = -46.75000946203671;
      direction.z = -33.11163796508103;
      // 0.8850143897009612, y: -46.75000946203671, z: -33.11163796508103
      console.log(direction);
      // direction.x += 1;
      // direction.y += 1;
      // direction.z += 1;
      viewer.scene.camera.direction.x = Cesium.Math.toRadians(direction.x);
      viewer.scene.camera.direction.y = Cesium.Math.toRadians(direction.y);
      viewer.scene.camera.direction.z = Cesium.Math.toRadians(direction.z);
    },
    // test: 相机显示相关参数
    cameraRelatedConfig() {
      // const viewer = this.cesiumMap.viewer;
      // console.log(viewer.scene.camera);
      // console.log(viewer.scene.camera.direction);
      // console.log("度数" + Cesium.Math.toRadians(180.0));
      // console.log(Cesium.Math.toDegrees(Cesium.Math.toRadians(180.0)));
      // // 110.686335,
      // // 25.617108,
      // // viewer.scene.camera.position.x = 110.686335;
      // // viewer.scene.camera.position.y = 25.617108;
      // // viewer.scene.camera.position.z = 100003;
      // console.log(viewer.scene.camera.position.z);
      // console.log("---viewer---");
      // console.log(_this);
      // // console.log(viewer);
      // // let pointEntities = _this.cesiumMap.entities.singlePoints;
      // // pointEntities.show = false;
      // // console.log(pointEntities);
      // // viewer.trackedEntity = _this.cesiumMap.entities.buildingModel;
      // // viewer.scene.camera.position.x = 110.686335;
      // // viewer.scene.camera.position.y = 25.617108;
      // console.log(viewer.scene.camera);
      // // console.log(viewer.scene.camera.position.x);
      // // console.log(viewer.scene.camera.position.y);
      // console.log(viewer.scene.camera.position.z);
      // viewer.scene.camera.position.z -= 100000;
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
// 样式重置
.el-aside {
  color: white !important;
}

.el-tree {
  background: rgba(0, 0, 0, 0);
  color: yellowgreen;
}

.el-tree-node__content:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

.el-checkbox {
  color: white !important;
}
</style>
